/**
 * 过渡动画
 * @see https://nuxt.com.cn/docs/4.x/getting-started/transitions
 */

/* 模糊渐变 */
.blur-enter-active,
.blur-leave-active {
  transition: all 0.2s;
}
.blur-enter-from,
.blur-leave-to {
  opacity: 0;
  filter: blur(1rem);
}

/* 3D旋转 */
.rotate-enter-active,
.rotate-leave-active {
  transition: all 0.2s;
}
.rotate-enter-from,
.rotate-leave-to {
  opacity: 0;
  transform: rotate3d(1, 1, 1, 15deg);
}

/* 左右侧滑 */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.2s;
}
.slide-left-enter-from,
.slide-right-leave-to {
  opacity: 0;
  transform: translate(50px, 0);
}
.slide-left-leave-to,
.slide-right-enter-from {
  opacity: 0;
  transform: translate(-50px, 0);
}
